<script setup lang="ts">
// import QueryResult from '@/composables/useUsers'

import axios from 'axios'

import { codeToText } from 'element-china-area-data'
import { ref } from 'vue'

let restaurtantCheckForm = ref([
  {
    restaurantid: '刷新一下',
    addressareaid: '刷新一下',
    restauranttypename: null,
    restaurantname: '刷新一下',
    password: '96e79218965eb72c92a549dd5a330112',
    image: 'https://hiram.oss-cn-chengdu.aliyuncs.com/59dafa30-3fec-418b-bda6-952585829201.jpg',
    phone: '15333134404',
    createtime: '2024-04-26 21:20:49',
    updatetime: '2024-04-26 21:20:49',
    introduction: '刷新一下',
    addressdetail: '刷新一下',
    surplus: 2,
    state: 0,
    qualification:
      'https://hiram.oss-cn-chengdu.aliyuncs.com/de54ea63-7750-4d2d-824a-60b071b0240c.jpg',
    point: 5
  },
  {
    restaurantid: '刷新一两下',
    addressareaid: '刷新一下',
    restauranttypename: null,
    restaurantname: '刷新一下',
    password: '96e79218965eb72c92a549dd5a330112',
    image: 'https://hiram.oss-cn-chengdu.aliyuncs.com/59dafa30-3fec-418b-bda6-952585829201.jpg',
    phone: '15333134404',
    createtime: '2024-04-26 21:20:49',
    updatetime: '2024-04-26 21:20:49',
    introduction: '刷新俩下',
    addressdetail: '刷新两下',
    surplus: 3,
    state: 0,
    qualification:
      'https://img2.baidu.com/it/u=390717814,4083625052&fm=253&fmt=auto&app=120&f=JPEG?w=847&h=500',
    point: 5
  }
])
let srcList = ref()
// 获取商家信息(网页打开)
const getUsers = () => {
  console.log('获取商家信息')
  axios({
    method: 'get',
    url: 'http://localhost:8080/manage/getallnormalres',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('UserManagerToken')
    }
  }).then(
    (res) => {
      console.log(res.data.data)
      restaurtantCheckForm.value = res.data.data
      srcList.value = restaurtantCheckForm.value.map((item) => item.qualification)
    },
    (err) => {
      console.log(err)
      ElMessage.error('获取商家信息失败')
    }
  )
}
getUsers()

// 通过审核
function passVerification(row: any) {
  const restaurantid = row.restaurantid
  console.log(restaurantid)

  axios({
    method: 'post',
    url: 'http://localhost:8080/restaurant/normal',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('UserManagerToken')
    },
    params: {
      restaurantid: restaurantid
    }
  }).then(
    (res) => {
      console.log(res)
      ElMessage.success('审核通过')
      getUsers()
    },
    (err) => {
      console.log(err)
      ElMessage.success('审核失败,请刷新')
    }
  )
}
// 驳回审核
function rejectVerification(row: any) {}
</script>

<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>这里是审核餐厅页面</span>
      </div>
    </template>
    <el-table :data="restaurtantCheckForm" :border="true" style="width: 100%">
      <el-table-column type="expand">
        <template #default="props">
          <div>
            <el-descriptions
              title="&nbsp&nbsp&nbsp&nbsp餐厅详情:"
              :column="5"
              direction="horizontal"
              border
            >
              <el-descriptions-item label="介绍">{{ props.row.introduction }}</el-descriptions-item>
              <el-descriptions-item label="详细地址">{{
                props.row.addressdetail
              }}</el-descriptions-item>
              <el-descriptions-item label="剩余餐桌数" :span="2">{{
                props.row.surplus
              }}</el-descriptions-item>
              <el-descriptions-item label="餐厅类型">
                <el-tag size="small">{{ props.row.restauranttypename }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="资质图片">
                <div class="demo-image__preview">
                  <el-image
                    style="width: 300px; height: 300px"
                    :src="props.row.qualification"
                    :preview-src-list="srcList"
                  />
                </div>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        width="80"
        prop="restaurantid"
        label="餐厅ID"
      ></el-table-column
      >>
      <el-table-column align="center" width="80" prop="restaurantname" label="名称" />
      <el-table-column align="center" width="80" label="头像" v-slot="{ row }">
        <el-avatar :size="40" :src="row.image" />
      </el-table-column>
      <el-table-column align="center" width="100" prop="restauranttypename" label="类型" />
      <el-table-column align="center" width="120" prop="addressareaid" label="地址">
        <template #default="{ row }">
          {{ codeToText[row.addressareaid.slice(0, 2)] }}{{ codeToText[row.addressareaid] }}
        </template> </el-table-column
      >>
      <el-table-column align="center" width="120" prop="phone" label="电话" />
      <el-table-column align="center" width="200" prop="createtime" label="注册时间" />
      <el-table-column align="center" width="158" label="操作">
        <template #default="{ row }">
          <el-button @click="passVerification(row)">通过</el-button>
          <el-button type="default" @click="rejectVerification(row)">驳回</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- <template #footer>Footer content</template> -->
  </el-card>
</template>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 200px;
}

.box-card {
  width: auto;
}

// 资质图片
</style>
